<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    /**
     * jsx推荐两个标签内容
     * 
     * jsx最终会转化为react元素，react元素最终会被渲染到页面里被浏览器解析
     * 1. jsx语法要写html标签，要求小写
     * 2. jsx语法可以写组件名：要求首字母大写
     * 
     * 首字母大写的，会认为是组件。小写的回当html标签解析
     * 
     */
    // 不是html标签，可以渲染，但是会报错，浏览器不认识也没有意义
    // const abc = <user>222</user>
    // root.render(abc)

    // html标签jsx，要求一律使用小写。 Div首字母大写，会认识是Div组件，Div组件未定义，所以报错
    // const oDiv = <Div>我是div</Div>
    // root.render(oDiv);

    
</script>

</html>